<script setup lang="ts">
import { computed, watch, ref, onMounted, onUnmounted } from 'vue';
import AgvListInner from './AgvListInner.vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const leftSplitterModel = ref(300);
const hideLeft = ref(false);

onMounted(() => {
  LCC.on('toggleLeftMenu', handleToggleLeftMenu);
});

onUnmounted(() => {
  LCC.off('toggleLeftMenu', handleToggleLeftMenu);
});

function handleToggleLeftMenu() {
  hideLeft.value = !hideLeft.value;
  if (hideLeft.value) {
    leftSplitterModel.value = 0;
  } else {
    leftSplitterModel.value = 300;
  }
}

</script>
<template>
  <q-splitter v-model="leftSplitterModel" unit="px" :limits="[0, 400]" vertical
              class="left-splitter-handle" :disable="hideLeft">
    <template v-slot:before>
      <AgvListInner v-show="!hideLeft" />
    </template>

    <template v-slot:separator>
      <q-avatar color="primary" text-color="white" size="25px" icon="drag_indicator" v-if="!hideLeft" />
    </template>

    <template v-slot:after>
      <router-view :key="route.params.ip as string" />
    </template>

  </q-splitter>
</template>
<style scoped>
.left-splitter-handle {
  height: 100%;
}
</style>
